<template>
  <div class="emplMgn">
    <header>
      <div style="flex:1">
        <div class="btn primary" @click="addEmplShow = true">添加</div>
      </div>
      <div>
        <input type="text" placeholder="姓名" v-model="likeName">
        <input type="text" placeholder="部门名" v-model="likeDeptName">
        <div class="btn primary" @click="search(likeName, likeDeptName)">搜索</div>
      </div>
    </header>
    <div class="card-container">
      <div class="card-row" v-for="(empl, index) of empls" :key="index">
        <div class="card">
          <div class="row">
            <div class="name">
              {{ empl[0].name }}
              <span class="close" @click="deleteEmpl(empl[0])"></span>
            </div>
          </div>
          <div class="row">
            <span>电话:</span> {{ empl[0].tel }}
            <span><font size="1">部门: </font>{{ empl[0].deptName }}</span>
          </div>
          <div class="row">
            <span>邮箱:</span> {{ empl[0].email }}
            <span><div class="btn primary" @click="modifyEmplClicked(empl[0])">修改</div></span>
          </div>
        </div>
        <div class="card" style="margin: 0 10px 0 10px" v-if="empl[1]">
          <div class="row">
            <div class="name">
              {{ empl[1].name }}
              <span class="close" @click="deleteEmpl(empl[1])"></span>
            </div>
          </div>
          <div class="row">
            <span>电话:</span> {{ empl[1].tel }}
            <span><font size="1">部门: </font>{{ empl[1].deptName }}</span>
          </div>
          <div class="row">
            <span>邮箱:</span> {{ empl[1].email }}
            <span><div class="btn primary" @click="modifyEmplClicked(empl[1])">修改</div></span>
          </div>
        </div>
        <div class="card" style="opacity:0" v-else></div>
        <div class="card" v-if="empl[2]">
          <div class="row">
            <div class="name">
              {{ empl[2].name }}
              <span class="close" @click="deleteEmpl(empl[2])"></span>
            </div>
          </div>
          <div class="row">
            <span>电话:</span> {{ empl[2].tel }}
            <span><font size="1">部门: </font>{{ empl[2].deptName }}</span>
          </div>
          <div class="row">
            <span>邮箱:</span> {{ empl[2].email }}
            <span><div class="btn primary" @click="modifyEmplClicked(empl[2])">修改</div></span>
          </div>
        </div>
        <div class="card" style="opacity:0" v-else></div>
      </div>
    </div>
    <footer>
      <Page @setCurPage="setCurPage" :curPage="curPage" :total="total" :pageSize="pageSize"></Page>
    </footer>
    <empl-mgn-dialog
      @close="addEmplShow = false"
      @done="addEmpl"
      :dialogData="{}"
      title="添加员工"
      :show="addEmplShow"
    ></empl-mgn-dialog>
    <empl-mgn-dialog
      @close="modifyEmplShow = false"
      @done="modifyEmpl"
      :dialogData="modifyEmplData"
      title="添加员工"
      :show="modifyEmplShow"
    ></empl-mgn-dialog>
  </div>
</template>
<script>
import { corpMixin } from '@/mixins/NavigationGuards';
import EmplMgnDialog from '@/components/Dialogs/emplMgn';
import Page from '@/components/Pages/index';
import api from '@/api/emplMgn';

async function getAllEmpl({ rows, page, deptName, name }) {
  const params = new URLSearchParams();
  params.append('companyId', sessionStorage.getItem('companyId'));
  params.append('rows', rows);
  params.append('page', page);
  params.append('deptName', deptName);
  params.append('name', name);
  const res = await api.getAllEmploApi(params);
  return res;
}
export default {
  mixins: [corpMixin],
  name: 'EmplMgn',
  data() {
    return {
      likeName: '',
      likeDeptName: '',
      empls: [],
      curPage: 1,
      total: 1000,
      pageSize: 9,

      addEmplShow: false,
      modifyEmplShow: false,
      modifyEmplData: null,
    };
  },
  components: {
    Page,
    EmplMgnDialog,
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem('userToken') === null || sessionStorage.getItem('loginType') !== '2') {
      next({ path: '/login' });
    }
    getAllEmpl({
      rows: 9,
      page: 1,
      deptName: '',
      name: '',
    }).then((res) => {
      next((vm) => {
        vm.$emit('route-switch', window.location.href.split('/').pop());
        // eslint-disable-next-line no-param-reassign
        vm.companyId = vm.$store.getters['user/getUserInfo'].companyId;
        vm.setAllEmpl(res);
      });
    });
  },
  methods: {
    setAllEmpl(data) {
      const newarray = [];
      this.empls = [];
      for (let i = 0; i < data.data.rows.length; i += 1) {
        newarray.push({
          name: data.data.rows[i].sysUser.realname,
          tel: data.data.rows[i].sysUser.phone,
          dept: data.data.rows[i].bdept.businessId,
          deptName: data.data.rows[i].bdept.name,
          email: data.data.rows[i].sysUser.email,
          id: data.data.rows[i].sysUser.businessId,
          desc: data.data.rows[i].brecruiter.description,
        });
        if (newarray.length === 3) {
          this.empls.push([...newarray]);
          newarray.splice(0, newarray.length);
        }
      }
      if (newarray.length !== 0) {
        this.empls.push(newarray);
      }
      this.total = data.data.total;
      this.curPage = data.data.pageNu;
      // console.log(this.empls);
      // console.log(this.empls);
    },
    addEmpl(empl) {
      this.addEmplShow = false;
      const params = new URLSearchParams();
      params.append('companyId', this.$store.getters['user/getUserInfo'].companyId);
      params.append('deptId', empl.dept);
      params.append('password', empl.psw);
      params.append('realName', empl.name);
      params.append('email', empl.email);
      params.append('phone', empl.tel);
      params.append('desc', empl.desc);
      api.addApi(params).then(async (response) => {
        if (response.data.code === 200) {
          this.$alert('添加成功');
          const empls = await getAllEmpl({
            rows: this.pageSize,
            page: this.curPage,
            deptName: this.likeDeptName,
            name: this.likeName,
          });
          this.setAllEmpl(empls);
        } else {
          this.$alert(response.data.message);
        }
      });
    },
    modifyEmplClicked(empl) {
      this.modifyEmplData = { ...empl };
      this.modifyEmplShow = true;
    },
    modifyEmpl(empl) {
      this.modifyEmplShow = false;
      const params = new URLSearchParams();
      params.append('deptId', empl.dept);
      params.append('password', empl.psw);
      params.append('realname', empl.name);
      params.append('email', empl.email);
      params.append('phone', empl.tel);
      params.append('desc', empl.desc);
      api.updateApi(empl.id, params).then(async (response) => {
        if (response.data.code === 200) {
          this.$alert('添加成功');
          const empls = await getAllEmpl({
            rows: this.pageSize,
            page: this.curPage,
            deptName: this.likeDeptName,
            name: this.likeName,
          });
          this.setAllEmpl(empls);
        } else {
          this.$alert(response.data.message);
        }
      });
    },
    deleteEmpl(empl) {
      // console.log(empl);
      this.$confirm('确定要移除该员工吗？', (res) => {
        if (res) {
          api.deleteApi(empl.id).then(async (response) => {
            if (response.data.code === 200) {
              this.$alert('删除成功');
              const empls = await getAllEmpl({
                rows: this.pageSize,
                page: this.curPage,
                deptName: this.likeDeptName,
                name: this.likeName,
              });
              this.setAllEmpl(empls);
            } else {
              this.$alert(response.data.message);
            }
          });
        }
      });
    },
    async search(name, deptName) {
      const empls = await getAllEmpl({
        rows: this.pageSize,
        page: this.curPage,
        deptName,
        name,
      });
      this.setAllEmpl(empls);
    },
    async setCurPage(page) {
      this.curPage = page;
      const empls = await getAllEmpl({
        rows: this.pageSize,
        page,
        deptName: this.likeDeptName,
        name: this.likeName,
      });
      this.setAllEmpl(empls);
    },
  },
};
</script>
<style lang="less">
@import url(../../../../static/style/site.comm.less);
@import url(../../../../static/style/site.vars.less);
.emplMgn {
  padding: 10px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(6,0,1,.05);
  & > header {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-bottom: 20px;
    & > div:nth-child(2) {
      display: flex;
      justify-content: right;
      box-sizing: border-box;
      & > input {
        // height: 20px;
        margin-right: 10px;
      }
    }
  }
  .card-container {
    height: 470px;
    .card-row {
      display: flex;
      justify-content: left;
      align-items: center;
      margin-bottom: 10px;
      .card {
        position: relative;
        background: rgba(103, 174, 255, 0.116);
        width: 100%;
        height: 150px;
        box-sizing: border-box;
        padding: 15px;
        .row {
          user-select: none;
          color: @site-main;
          box-sizing: border-box;
          padding: 0px;
          height: 45px;
          .close {
            width: 21px;
            height: 21px;
            cursor: pointer;
            float: right;
            background: url(../../../assets/img/u532.png) no-repeat center center;
            &:hover {
              background: url(../../../assets/img/u532_mouseOver.png) no-repeat center center;
            }
          }
          .name {
            color: rgb(0, 64, 138);
            font-size: 24px;
          }
          .tel {
            color: #fff;
          }
          & > span:nth-child(1) {
            font-size: 10px;
          }
          & > span:nth-child(2) {
            float: right;
          }
        }
      }
    }
  }
  & > footer {
    margin-top: 30px;
    padding: 20px 0 20px 0;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
